import 'package:flutter/material.dart';
import 'package:flutter_screenutil/flutter_screenutil.dart';
import 'package:get/get.dart';
import 'package:share_fit/app/components/back_btn_icon.dart';
import 'package:share_fit/app/controllers/space/space_const.dart';
import 'package:share_fit/app/controllers/space/weekly/string_util.dart';
import 'package:share_fit/app/controllers/space/weekly/weekly_logic.dart';
import 'package:share_fit/app/helper/ext/tr_ext.dart';
import 'package:share_fit/app/tools/color_const.dart';
import 'package:share_fit/generated/locales.g.dart';

class WeeklyPage extends StatelessWidget {
  
  final logic = Get.put(WeeklyLogic());
  int targetStep = 10000;

  @override
  Widget build(BuildContext context) {
    targetStep = logic.read("sport_target_step", defaultValue: SpaceConst.targetSteps[0], global: true);
    return Scaffold(
      // backgroundColor: Color(0xFFF5F9FB),
      appBar: AppBar(
        // backgroundColor: Color(0xFFF5F9FB),
        title: Text(LocaleKeys.space_weekly.ts, style: TextStyle(fontSize: 54.sp, color: ColorConst.btnFontColor),),
        centerTitle: true,
        leading: BackBtnIcon(onTap: () => Get.back()),
        // leading: IconButton(
        //   padding: EdgeInsets.only(left: 15,),
        //   icon: Image.asset("assets/images/space/icon_appbar_arrow_back.png"),
        //   onPressed: () {
        //     Get.back();
        //   },
        //   // child: Image.asset("images/icon_appbar_arrow_back.png"),
        // ),
        // leadingWidth: 25,
      ),
      body: ListView(
        padding: EdgeInsets.only(left: 42.w, top: 100.h, right: 42.w, bottom: 88.h),
        children: [
          Row(
            mainAxisAlignment: MainAxisAlignment.spaceBetween,
            children: [
              Text(LocaleKeys.weekly_step_detail.ts, style: TextStyle(color: Colors.black, fontSize: 42.sp),),
              GetBuilder<WeeklyLogic>(
                id: 'switch_weekly', builder: (_){
                return Text(logic.getDate(), style: TextStyle(color: Colors.black, fontSize: 36.sp));
              })
            ],
          ),
          SizedBox(height: 92.h,),
          Row(
            mainAxisAlignment: MainAxisAlignment.spaceBetween,
            children: [
              Text('1', style: TextStyle(color: Colors.black, fontSize: 42.sp),),
              Text(targetStep.toString(), style: TextStyle(color: Colors.black, fontSize: 36.sp))
            ],
          ),
          Container(
            height: 1,
            margin: EdgeInsets.only(top: 20.h,),
            color: Color(0xFF999999),
          ),
          Container(
            margin: EdgeInsets.only(left: 97.w, top: 52.h, right: 97.h),
            child: Row(
              mainAxisAlignment: MainAxisAlignment.spaceBetween,
              children: [
                Text(LocaleKeys.weekly_sunday.ts, style: TextStyle(color: Colors.black, fontSize: 42.sp),),
                Text(LocaleKeys.weekly_monday.ts, style: TextStyle(color: Colors.black, fontSize: 42.sp)),
                Text(LocaleKeys.weekly_tuesday.ts, style: TextStyle(color: Colors.black, fontSize: 42.sp)),
                Text(LocaleKeys.weekly_wednesday.ts, style: TextStyle(color: Colors.black, fontSize: 42.sp)),
                Text(LocaleKeys.weekly_thursday.ts, style: TextStyle(color: Colors.black, fontSize: 42.sp)),
                Text(LocaleKeys.weekly_friday.ts, style: TextStyle(color: Colors.black, fontSize: 42.sp)),
                Text(LocaleKeys.weekly_saturday.ts, style: TextStyle(color: Colors.black, fontSize: 42.sp))
              ],
            ),
          ),
          Container(
            decoration: BoxDecoration(
                borderRadius: BorderRadius.circular(10),
                color: Colors.white
            ),
            margin: EdgeInsets.only(top: 64.h),
            child: Container(
              padding: EdgeInsets.all(60.w),
              child: Column(
                children: [
                  Row(
                    mainAxisAlignment: MainAxisAlignment.spaceAround,
                    children: [
                      GestureDetector(
                        onTap: (){
                          if(!logic.state.switchWeekly) {
                            logic.updateWeekly(true);
                          }
                        },
                        child: GetBuilder<WeeklyLogic>(
                          id: 'switch_weekly',
                          builder: (_) {
                            return Column(
                              children: [
                                Text(LocaleKeys.weekly_last.ts, style: TextStyle(fontSize: 54.sp, color: logic.state.switchWeekly?ColorConst.btnFontColor:ColorConst.secondaryFontColor),),
                                Opacity(opacity: logic.state.switchWeekly?1:0, child: Container(
                                  margin: EdgeInsets.only(top: 30.h),
                                  width: 124.w,
                                  height: 15.h,
                                  decoration: BoxDecoration(
                                      borderRadius: BorderRadius.circular(10),
                                      color: Color(0xFFFE6631)
                                  ),))
                              ],);
                          },),),
                      GestureDetector(
                        onTap: (){
                          if(logic.state.switchWeekly) {
                            logic.updateWeekly(false);
                          }
                        },
                        child: GetBuilder<WeeklyLogic>(
                          id: 'switch_weekly',
                          builder: (_) {
                            return Column(
                              children: [
                                Text(LocaleKeys.weekly_this.ts, style: TextStyle(fontSize: 54.sp, color: logic.state.switchWeekly?ColorConst.secondaryFontColor:ColorConst.btnFontColor),),
                                Opacity(opacity: logic.state.switchWeekly?0:1, child: Container(
                                  margin: EdgeInsets.only(top: 30.h),
                                  width: 124.w,
                                  height: 15.h,
                                  decoration: BoxDecoration(
                                      borderRadius: BorderRadius.circular(10),
                                      color: Color(0xFFFE6631)
                                  ),))
                              ],);
                          },),)
                    ],),
                  SizedBox(height: 64.h,),
                  Row(
                    mainAxisAlignment: MainAxisAlignment.spaceAround,
                    children: [
                      GestureDetector(
                        onTap: (){},
                        child: CircleAvatar(
                          radius: 50,
                          foregroundImage: AssetImage('assets/images/space/icon_weekly_01.png'),
                        ),
                      ),
                      GestureDetector(
                        onTap: (){},
                        child: CircleAvatar(
                          radius: 50,
                          foregroundImage: AssetImage('assets/images/space/icon_weekly_02.png'),
                        ),
                      ),
                    ],
                  ),
                  SizedBox(height: 127.h,),
                  Row(
                    mainAxisAlignment: MainAxisAlignment.start,
                    crossAxisAlignment: CrossAxisAlignment.end,
                    children: [
                      Container(
                        width: 16.h,
                        height: 68.w,
                        decoration: BoxDecoration(
                            borderRadius: BorderRadius.circular(10),
                            color: Color(0xFFFE6631)
                        ),
                      ),
                      SizedBox(width: 37.w,),
                      Text(LocaleKeys.weekly_report.ts, style: TextStyle(fontSize: 54.sp, color: ColorConst.btnFontColor),)
                    ],
                  ),
                  // Column(
                  //   children: _getWeelyTableRow(),
                  // ),
                  GetBuilder<WeeklyLogic>(
                      id: 'weekly_tabview',
                      builder: (_) {
                        return Table(
                          defaultColumnWidth: FixedColumnWidth(0.19.sw),
                          children: _getWeelyTableRow(),
                        );
                  }),
                  Column(
                    children: _getWeelyReport(),
                  ),
                  SizedBox(height: 100.h,),
                  Row(
                    mainAxisAlignment: MainAxisAlignment.start,
                    crossAxisAlignment: CrossAxisAlignment.end,
                    children: [
                      Container(
                        width: 16.h,
                        height: 68.w,
                        decoration: BoxDecoration(
                            borderRadius: BorderRadius.circular(10),
                            color: Color(0xFFFE6631)
                        ),
                      ),
                      SizedBox(width: 37.w,),
                      Text(LocaleKeys.weekly_data_des.ts, style: TextStyle(fontSize: 54.sp, color: ColorConst.btnFontColor),)
                    ],
                  ),
                  Column(
                    children: _getDataDes(),
                  ),
                ],
              ),
            ),
          )
        ],
      ),
    );
  }

  List<Widget> _getDataDes() {
    List<Widget> items = [];
    des.forEach((element) {
      var str = element.split(':');
      Widget widget = Container(
        margin: EdgeInsets.only(top: 50.h),
        child: Row(
          crossAxisAlignment: CrossAxisAlignment.start,
          children: [
            Container(
              alignment: Alignment.centerLeft,
              width: 160.w,
              child: Text('${str[0]}：', style: TextStyle(color: ColorConst.btnFontColor, fontSize: 36.sp)),
            ),
            Expanded(child: Text(StringUtils.autoLineString(str[1]), style: TextStyle(color: ColorConst.btnFontColor, fontSize: 36.sp)))
          ],
        ),
      );
      items.add(widget);
    });
    return items;
  }

  List<Widget> _getWeelyReport() {
    List<Widget> items = [];
    reports.forEach((element) {
      Widget widget = Container(
        margin: EdgeInsets.only(top: 50.h),
        child: Row(
          mainAxisAlignment: MainAxisAlignment.start,
          children: [
            Container(
              width: 20.w,
              height: 20.w,
              margin: EdgeInsets.only(left: 22.w, right: 28.w),
              decoration: BoxDecoration(
                  borderRadius: BorderRadius.circular(50),
                  color: Color(0xFFFE6631)
              ),
            ),
            Expanded(child:Text(element, style: TextStyle(color: ColorConst.btnFontColor, fontSize: 42.sp),),),
            SizedBox(width: 22.w,)
          ],
        ),
      );
      items.add(widget);
    });
    return items;
  }

  List<TableRow> _getWeelyTableRow() {
    List<TableRow> rows = [];
    logic.state.weeklyData.forEach((element) {
      TableRow widget = TableRow(
        children: _getRows(element.data)
      );
      rows.add(widget);
    });
    return rows;
  }

  List<Widget> _getRows(List<String> datas) {
    List<Widget> rows = [];
    datas.forEach((element) {
      rows.add(Container(
        padding: EdgeInsets.only(top: 50.h),
        child: Text(element, style: TextStyle(fontSize: 36.sp, color: element==LocaleKeys.weekly_low.ts?Color(0xFFFE6631):ColorConst.btnFontColor),),));
    });
    return rows;
  }

  List<String> reports = [
    LocaleKeys.weekly_report_01.ts,
    LocaleKeys.weekly_report_02.ts,
    LocaleKeys.weekly_report_03.ts,
    // LocaleKeys.weekly_report_04.ts,
  ];

  List<String> des = [
    LocaleKeys.weekly_measure_des.ts,
    LocaleKeys.weekly_calorie_des.ts,
    LocaleKeys.weekly_distance_des.ts,
    LocaleKeys.weekly_sleep_des.ts,
    LocaleKeys.weekly_rate_des.ts,
    // LocaleKeys.weekly_pressure_des.ts,
    LocaleKeys.weekly_note_des.ts
  ];

  // void syncWorkoutHistoryData() {
  //   DateTime data = DateTime.now();
  //   int hours = data.timeZoneOffset.inHours;
  //   if(hours>0) {
  //     data = data.add(new Duration(hours: -hours));
  //   }
  //
  //   int endTime = (data.millisecondsSinceEpoch/1000).toInt();
  //   int startTime = (data.add(new Duration(days: -7)).millisecondsSinceEpoch/1000).toInt();
  //
  //   Map map = {'startTime':startTime, 'endTime':endTime};
  //   Map<String, Object> params = {'type':map};
  //   logic.syncWorkoutHistoryData(params, back: (value) {
  //     print('syncWorkoutHistoryData:$value');
  //   });
  // }
  
}